<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import routeComponentName from '@/config/route-component-name'
  import Pagination from '@/components/Pagination/index.vue'
  import { useGetReturnFactoryList } from '@/services/pages/return-factory/useReturnFactory'
  import { useGetOptions } from '@/services/pages/return-factory/useModule'
  import _ from 'lodash'

  const { options, getOptionsLoading, getOptionsParam, getOptions } = useGetOptions()
  const { total, list, getListParam, getListLoading, getList } = useGetReturnFactoryList()

  defineOptions({
    name: routeComponentName.returnFactory.returnFactoryList,
  })

  const route = useRoute()
  const router = useRouter()

  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)

  const statusOptions = ref([
    { label: '待审核', value: 1 },
    { label: '待退回', value: 2 },
    { label: '待确认', value: 3 },
    { label: '处理中', value: 4 },
    { label: '待寄回', value: 5 },
    { label: '待签收', value: 6 },
    { label: '已完成', value: 7 },
    { label: '已取消', value: 8 },
  ])

  const getRepairList = () => {
    if (paginationInstance.value) {
      getListParam.value.page = paginationInstance.value.current
      getListParam.value.limit = paginationInstance.value.size
      getList()
    }
  }

  const onCreateRepairClick = () => {
    router.push({ path: '/return/factory/new' })
  }

  const init = () => {
    getRepairList()
  }

  const onReset = () => {
    getListParam.value = {
      repairModuleId: '',
      repairNo: '',
      status: '',
      userKeyword: '',
      limit: 50,
      page: 1,
    }
    getList()
  }

  const handleGetModuleOptions = _.debounce((keyword: string) => {
    if (getOptionsParam.value.name !== keyword) {
      getOptionsParam.value.name = keyword
      getOptions()
    }
  }, 600)

  const toReturnFactoryDetail = (id: string) => {
    router.push({ path: `/return/factory/detail/${id}` })
  }

  watch(
    () => route.name,
    (value) => {
      if (value !== 'returnFactoryList') return
      if (!route.query.isUpdate) return
      if (route.query.isUpdate !== 'true') return
      getRepairList()
    },
  )

  onMounted(() => {
    init()
  })
</script>

<template>
  <div class="repair-list-page">
    <div class="content">
      <div class="header">
        <div class="btn-group">
          <h-plain-button v-permission="'retrunFactory_add'" @click="onCreateRepairClick">
            新建返厂
          </h-plain-button>
        </div>

        <div class="search">
          <!-- 返厂模块 -->
          <el-select
            v-model="getListParam.repairModuleId"
            placeholder="请选择返厂模块"
            style="width: 120px"
            clearable
            filterable
            :filter-method="handleGetModuleOptions"
            :loading="getOptionsLoading"
            @change="getList"
            @clear="getList"
          >
            <el-option
              v-for="(option, index) in options"
              :key="index"
              :label="option.name"
              :value="option.id"
            />
          </el-select>

          <!-- 状态 -->
          <el-select
            v-model="getListParam.status"
            placeholder="请选择状态"
            style="width: 120px"
            clearable
            @change="getList"
            @clear="getList"
          >
            <el-option
              v-for="(status, index) in statusOptions"
              :key="index"
              :label="status.label"
              :value="status.value"
            />
          </el-select>

          <!-- 返厂单号 -->
          <el-input
            v-model.trim="getListParam.repairNo"
            placeholder="请输入返厂单号"
            clearable
            style="width: 120px"
            @keyup.enter="getList"
            @clear="getList"
          />

          <!-- 关键字 -->
          <el-input
            v-model.trim="getListParam.userKeyword"
            placeholder="请输入公司名称/手机号"
            clearable
            style="width: 160px"
            @keyup.enter="getList"
            @clear="getList"
          />

          <h-button type="primary" @click="getList">
            <el-icon>
              <Search></Search>
            </el-icon>
            搜索
          </h-button>

          <h-button @click="onReset">
            <el-icon>
              <refresh-right></refresh-right>
            </el-icon>
            重置
          </h-button>
        </div>
      </div>
      <div class="table-pagination">
        <div class="table">
          <el-table
            v-loading="getListLoading"
            :border="true"
            :data="list"
            height="100%"
            :tooltip-options="{
              popperClass: 'return-factory-reason',
            }"
          >
            <!-- 序号 -->
            <el-table-column type="index" fixed="left" :align="'center'" width="50" label="序号" />

            <!-- 返厂单号 -->
            <el-table-column label="返厂单号" prop="repairNo" width="140" show-overflow-tooltip>
              <template #default="{ row }">
                <h-link @click="toReturnFactoryDetail(row.id)">{{ row.repairNo }}</h-link>
              </template>
            </el-table-column>

            <!-- 返厂类型 -->
            <el-table-column
              label="返厂类型"
              prop="repairModule"
              width="100"
              show-overflow-tooltip
            />

            <!-- 客户名称 -->
            <el-table-column label="客户名称" prop="username" width="140" show-overflow-tooltip />

            <!-- 联系人 -->
            <el-table-column label="联系人" prop="contacts" width="80" show-overflow-tooltip />

            <!-- 联系人手机号 -->
            <el-table-column label="联系人手机号" prop="phone" width="110" show-overflow-tooltip />

            <!-- 产品信息 -->
            <el-table-column label="产品信息" show-overflow-tooltip width="320">
              <template #default="{ row }">
                {{
                  (row.goodsVos as ReturnFactoryAPIResponse.RepairListItem['goodVos'])
                    .map((item) => item.goodsName)
                    .join('、')
                }}
              </template>
            </el-table-column>

            <!-- 条码 -->
            <el-table-column label="条码" show-overflow-tooltip width="160">
              <template #default="{ row }">
                {{ row.snCodes.join('、') }}
              </template>
            </el-table-column>

            <!-- 数量 -->
            <el-table-column label="数量" prop="qty" width="60" />

            <!-- 返厂来源 -->
            <el-table-column label="返厂来源" prop="source" width="120">
              <template #default="{ row }">
                <span v-if="row.source === 1">系统创建</span>
                <span v-if="row.source === 2">工单生成</span>
                <span v-if="row.source === 3">公司移动端生成</span>
                <span v-if="row.source === 4">网点移动端生成</span>
              </template>
            </el-table-column>

            <!-- 创建时间 -->
            <el-table-column label="创建时间" prop="createTime" width="128" />

            <!-- 更新时间 -->
            <el-table-column label="更新时间" prop="updateTime" width="128" />

            <!-- 状态 -->
            <el-table-column label="状态" prop="status" fixed="right" :align="'center'" width="100">
              <template #default="{ row }">
                <div class="flex_justify_center">
                  <h-status v-if="row.status === 1" type="warning">待审核</h-status>
                  <h-status v-else-if="row.status === 2" type="warning">待退回</h-status>
                  <h-status v-else-if="row.status === 3" type="warning">待确认</h-status>
                  <h-status v-else-if="row.status === 4">处理中</h-status>
                  <h-status v-else-if="row.status === 5" type="warning">待寄回</h-status>
                  <h-status v-else-if="row.status === 6" type="warning">待签收</h-status>
                  <h-status v-else-if="row.status === 7" type="success">已完成</h-status>
                  <h-status v-else-if="row.status === 8" type="info">已取消</h-status>
                  <h-status v-else-if="row.status === 9" type="warning">实收未过账</h-status>
                  <h-status v-else-if="row.status === 10" type="warning">待发货</h-status>
                  <h-status v-else-if="row.status === 11" type="warning">实发未过账</h-status>
                </div>
              </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column label="操作" prop="operate" fixed="right" width="50">
              <template #default="{ row }">
                <h-link @click="toReturnFactoryDetail(row.id)">详情</h-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <Pagination
            ref="paginationInstance"
            :total="total"
            @size-change="getList"
            @current-change="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  :deep(.return-factory-reason) {
    max-width: 300px !important;
    max-height: 150px !important;
    overflow: auto !important;
  }

  .repair-list-page {
    width: 100%;
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .content {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 12px;
      display: flex;
      flex-direction: column;
      row-gap: 12px;

      .header {
        display: flex;
        justify-content: space-between;

        .search {
          display: flex;
          column-gap: 8px;
        }
      }

      .table-pagination {
        flex: 1;
        height: 0;
        display: flex;
        flex-direction: column;
        row-gap: 12px;

        .table {
          max-height: calc(100% - 40px);
        }

        .pagination {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
</style>
